<ng-template #inputTemplate>
  <input #inputElement
    autocomplete="something-new"
    class="ant-select-search__field"
    (compositionstart)="isComposing = true"
    (compositionend)="isComposing = false"
    [ngModel]="inputValue"
    (ngModelChange)="setInputValue($event)"
    [disabled]="nzSelectService.disabled">
  <span #mirrorElement class="ant-select-search__field__mirror"></span>
</ng-template>
<div class="ant-select-selection__rendered">
  <div *ngIf="nzPlaceHolder"
    nz-select-unselectable
    [style.display]="placeHolderDisplay"
    class="ant-select-selection__placeholder">{{ nzPlaceHolder }}</div>
  <!--single mode-->
  <ng-container *ngIf="nzSelectService.isSingleMode">
    <!--selected label-->
    <div *ngIf="nzSelectService.listOfCachedSelectedOption.length && nzSelectService.listOfSelectedValue.length"
      class="ant-select-selection-selected-value"
      [attr.title]="nzSelectService.listOfCachedSelectedOption[0]?.nzLabel"
      [ngStyle]="selectedValueStyle">
      <ng-container *nzStringTemplateOutlet="nzCustomTemplate; context: { $implicit: nzSelectService.listOfCachedSelectedOption[0] }">
        <ng-container>{{ nzSelectService.listOfCachedSelectedOption[0]?.nzLabel }}</ng-container>
      </ng-container>
    </div>
    <!--show search-->
    <div *ngIf="nzShowSearch"
      class="ant-select-search ant-select-search--inline" [style.display]="nzOpen ? 'block' : 'none'">
      <div class="ant-select-search__field__wrap">
        <ng-template [ngTemplateOutlet]="inputTemplate"></ng-template>
      </div>
    </div>
  </ng-container>
  <!--multiple or tags mode-->
  <ul *ngIf="nzSelectService.isMultipleOrTags">
    <ng-container *ngFor="let option of nzSelectService.listOfCachedSelectedOption | slice: 0 : nzMaxTagCount;trackBy:trackValue; let index = index">
      <li [@zoomMotion]
        [@.disabled]="noAnimation?.nzNoAnimation"
        [nzNoAnimation]="noAnimation?.nzNoAnimation"
        [attr.title]="option.nzLabel"
        [class.ant-select-selection__choice__disabled]="option.nzDisabled"
        (@zoomMotion.done)="animationEnd()"
        class="ant-select-selection__choice">
        <ng-container *nzStringTemplateOutlet="nzCustomTemplate; context:{ $implicit: nzSelectService.listOfCachedSelectedOption[index] }">
          <div class="ant-select-selection__choice__content">{{ option.nzLabel }}</div>
        </ng-container>
        <span *ngIf="!option.nzDisabled"
          class="ant-select-selection__choice__remove"
          (mousedown)="$event.preventDefault()"
          (click)="removeSelectedValue(option, $event)">
          <i nz-icon nzType="close" class="ant-select-remove-icon" *ngIf="!nzRemoveIcon; else nzRemoveIcon"></i>
        </span>
      </li>
    </ng-container>
    <li *ngIf="nzSelectService.listOfCachedSelectedOption.length > nzMaxTagCount"
      [@zoomMotion]
      [@.disabled]="noAnimation?.nzNoAnimation"
      [nzNoAnimation]="noAnimation?.nzNoAnimation"
      (@zoomMotion.done)="animationEnd()"
      class="ant-select-selection__choice">
      <div class="ant-select-selection__choice__content">
        <ng-container *ngIf="nzMaxTagPlaceholder">
          <ng-template
            [ngTemplateOutlet]="nzMaxTagPlaceholder"
            [ngTemplateOutletContext]="{ $implicit: nzSelectService.listOfSelectedValue | slice: nzMaxTagCount}">
          </ng-template>
        </ng-container>
        <ng-container *ngIf="!nzMaxTagPlaceholder">
          + {{ nzSelectService.listOfCachedSelectedOption.length - nzMaxTagCount }} ...
        </ng-container>
      </div>
    </li>
    <li class="ant-select-search ant-select-search--inline">
      <ng-template [ngTemplateOutlet]="inputTemplate"></ng-template>
    </li>
  </ul>
</div>
<span *ngIf="nzAllowClear && nzSelectService.listOfSelectedValue.length"
  class="ant-select-selection__clear"
  nz-select-unselectable
  (mousedown)="$event.preventDefault()"
  (click)="onClearSelection($event)">
    <i nz-icon nzType="close-circle" nzTheme="fill" *ngIf="!nzClearIcon; else nzClearIcon" class="ant-select-close-icon"></i>
  </span>
<span class="ant-select-arrow" nz-select-unselectable *ngIf="nzShowArrow">
  <i nz-icon nzType="loading" *ngIf="nzLoading; else defaultArrow"></i>
  <ng-template #defaultArrow>
    <i nz-icon nzType="down" class="ant-select-arrow-icon" *ngIf="!nzSuffixIcon; else nzSuffixIcon"></i>
  </ng-template>
</span>